<template>
  <div class="branch">
    <div class="left">
      <div
        v-for="(item, index) in list"
        :key="item"
        @click="fenleiindex(item), (active = index)"
        :class="active == index ? 'active' : ''"
      >
        {{ item }}
      </div>
    </div>
    <router-view class="right"></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: null,
      ii: 0, //点击的列表
      active: 0,
    };
  },
  mounted() {
    this.getList();
    this.$emit("fanhui", 1);
  },
  methods: {
    //获取分类列表
    getList() {
      axios
        .get("http://121.89.205.189:3000/api/pro/categorylist")
        .then((res) => {
          this.list = res.data.data;
          this.li = res.data.data[0];
          this.$router
            .push({ name: "fenlei", params: { i: this.li } })
            .catch((err) => {
              return err;
            });
        });
    },
    // 点击
    fenleiindex(item) {
      this.$router
        .push({ name: "fenlei", params: { i: item } })
        .catch((err) => {
          return err;
        });
    },
  },
  watch: {},
};
</script>

<style lang="less" scoped>
::-webkit-scrollbar {
  display: none; //(或者是width: 0;)
}
.branch {
  display: flex;
}
.left {
  width: 0.86rem;
  height: 5.77rem;
  background: #f8f8f8;
  overflow: auto;

  > div {
    width: 100%;
    height: 0.46rem;
    text-align: center;
    line-height: 0.46rem;
  }
}
.right {
  flex: 1;
  height: 5.77rem;
  overflow: auto;
}
.active {
  background: white;
  color: red;
}
</style>